@import "tailwindcss";
@import "./styles/variables.css";

:root {
  /* 基础颜色 */
  --background: rgb(242, 244, 247);
  --foreground: #171717;

  /* 布局变量 */
  --header-height: 64px;
  --sidebar-width: 200px;
  --border-color: #e5e7eb;
  --z-index-header: 30;
  --z-index-sidebar: 20;
  --z-index-content: 10;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
    --border-color: rgba(255, 255, 255, 0.1);
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/* 自定义滚动条样式 */
.custom-scrollbar {
  overflow-x: auto;
}

.custom-scrollbar::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}

.custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.5);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.7);
}

/* 可调整大小的模态框样式 */
.resizable-modal .ant-modal-content {
  resize: both;
  overflow: auto;
  min-width: 400px;
  min-height: 300px;
}

.resizable-modal .ant-modal-body {
  overflow: auto;
  max-height: calc(100vh - 200px);
}

/* 确保模态框内容可以正确滚动 */
.resizable-modal .ant-modal-wrap {
  overflow: hidden;
}

/* 模态框拖拽样式 */
.resizable-modal .ant-modal-header {
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
  z-index: 1;
}

.resizable-modal .ant-modal-content {
  position: relative;
}

/* 确保拖拽时不会选中文本 */
.resizable-modal .ant-modal-title {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 优化拖拽时的视觉效果 */
.resizable-modal.ant-modal-dragging {
  opacity: 0.8;
}

/* 拖拽时的遮罩层样式 */
.resizable-modal .ant-modal-mask {
  pointer-events: none;
}

/* 确保模态框可以拖拽 */
.resizable-modal .ant-modal {
  position: absolute !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
}

/* 拖拽时的样式 */
.resizable-modal.ant-modal-dragging .ant-modal-content {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
